<template>
  <div class="tab-cont">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待办" name="待办">
        <custom-title name="待办列表">
          <template #right>
            <el-button type="primary" icon="el-icon-plus" @click="dialogAddLeave = true">新增</el-button>
          </template>
        </custom-title>
        <el-table :data="list">
          <el-table-column label="流程名称" align="center" prop="proc_inst_name" show-overflow-tooltip />
          <el-table-column label="请假人" align="center" prop="applicant" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="create_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="请假时长" align="center" prop="leave_days" show-overflow-tooltip />
          <el-table-column label="最后审核时间" align="center" prop="review_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleInfo(row)">办理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="list.length" :current-page="form.pageNum" :total="total" :page-size="form.pageSize" @changeData="getTaskList" />
      </el-tab-pane>
      <el-tab-pane label="进行中" name="进行中">
        <custom-title name="进行中列表" />
        <el-table :data="list2">
          <el-table-column label="流程名称" align="center" prop="proc_inst_name" show-overflow-tooltip />
          <el-table-column label="请假人" align="center" prop="applicant" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="create_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="请假时长" align="center" prop="leave_days" show-overflow-tooltip />
          <el-table-column label="最后审核时间" align="center" prop="review_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="办理人" align="center" prop="reviewer" show-overflow-tooltip />
        </el-table>
        <pagination v-if="list2.length" :current-page="form2.pageNum" :total="total2" :page-size="form2.pageSize" @changeData="getHistoryList" />
      </el-tab-pane>
      <el-tab-pane label="历史" name="历史">
        <custom-title name="历史列表" />
        <el-table :data="list1">
          <el-table-column label="流程名称" align="center" prop="proc_inst_name" show-overflow-tooltip />
          <el-table-column label="请假人" align="center" prop="applicant" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="create_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="请假时长" align="center" prop="leave_days" show-overflow-tooltip />
          <el-table-column label="最后审核时间" align="center" prop="review_time" min-width="100px" show-overflow-tooltip />
          <el-table-column label="办理人" align="center" prop="reviewer" show-overflow-tooltip />
        </el-table>
        <pagination v-if="list1.length" :current-page="form1.pageNum" :total="total1" :page-size="form1.pageSize" @changeData="getHistoryList" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新增请假申请" :visible.sync="dialogAddLeave" width="40%" @closed="handleAddClose">
      <el-form ref="leaveForm" :model="leaveForm" :rules="leaveFormRules" label-width="100px">
        <el-form-item label="流程" prop="processDefinitionId">
          <el-select v-model="leaveForm.processDefinitionId" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in leaveList"
              :key="item.processDefinitionID"
              :label="item.name"
              :value="item.processDefinitionID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="instanceName">
          <el-input v-model="leaveForm.instanceName" placeholder="请输入名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddClose">取 消</el-button>
        <el-button type="primary" @click="handleAddSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="表单详情" :visible.sync="dialogForm" width="60%" top="10vh" @closed="handleFormSubmit">
      <VFormDesigner v-if="dialogForm" ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv" @handleFormSubmit="handleFormSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import VFormDesigner from '@/components/form-designer/index.vue'

import { getDefinitions, startProcess, getTaskList, getHistoryList, getOngoingList } from '@/api/process'
export default {
  components: {
    VFormDesigner,
  },
  data() {
    return {
      activeName: '待办',
      form: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      // 进行中
      form2: {
        pageNum: 1,
        pageSize: 10
      },
      total2: 0,
      list2: [],
      // 历史
      form1: {
        pageNum: 1,
        pageSize: 10
      },
      total1: 0,
      list1: [],
      // 新增请假申请
      dialogAddLeave: false,
      leaveForm: {
        processDefinitionId: '',
        instanceName: '',
        instanceVariable: ''
      },
      leaveFormRules: {
        processDefinitionId: [{ required: true, message: "请选择流程", trigger: 'blur' }],
        instanceName: [{ required: true, message: "请输入名称", trigger: 'blur' }],
        instanceVariable: []
      },
      leaveList: [],
      // 表单详情
      dialogForm: false,
      designerConfig: {
        resetFormJson: false,
        toolbarMaxWidth: 490,
      },
      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDefinitions()
      this.getTaskList()
    })
  },
  methods: {
    renderTime(date) {
        const dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    handleClick(item) {
      if (item.name === '待办') {
        this.getTaskList()
      } else if (item.name === '进行中') {
        this.getOngoingList()
      } else {
        this.getHistoryList()
      }
    },
    handleAddClose() {
      this.$refs.leaveForm.resetFields()
      this.dialogAddLeave = false
    },
    // 编辑
    handleInfo(row) {
      sessionStorage.setItem('typ', 'detail')
      // sessionStorage.setItem('businessKey', row.businessKey)
      sessionStorage.setItem('instTaskID', row.task_inst_id)
      sessionStorage.setItem('procInstID', row.proc_inst_id)
      setTimeout(() => {
        this.dialogForm = true
      }, 500)
    },
    // 新增
    handleAddSure() {
      this.$confirm('确定启动该实例吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.startProcess()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启动'
          })        
        })
    },
    handleFormSubmit() {
      this.dialogForm = false
      this.$bus.$emit('taskNumChange', true)
      this.getTaskList()
      this.getHistoryList()
    },
    // 启动实例
    startProcess() {
      this.$refs.leaveForm.validate(async(valid) => {
        if (valid) {
          const { status, msg, obj } = await startProcess(this.leaveForm)
          if (status === 0) {
            this.handleAddClose()
            this.$message({
              message: msg,
              type: 'success'
            })
            this.$bus.$emit('taskNumChange', true)
            sessionStorage.setItem('typ', 'submit')
            // sessionStorage.setItem('businessKey', obj.businessKey)
            sessionStorage.setItem('instTaskID', obj.instTaskID)
            setTimeout(() => {
              this.dialogForm = true
            }, 500)
          }
        } else {
          return false
        }
      })
    },
    // 获取流程实例列表
    async getDefinitions() {
      const { status, obj } = await getDefinitions({
        pageNum: 1,
        pageSize: 999
      })
      if (status === 0) {
        console.log(obj)
        this.leaveList = obj.list
      }
    },
    // 我的请假-待办
    async getTaskList() {
      const { status, obj } = await getTaskList(this.form)
      if (status === 0) {
        if (obj) {
          this.list = obj.list
          this.total = obj.totalNum
        } else {
          this.list = []
          this.total = 0
        }
      }
    },
    // 我的请假-进行中
    async getOngoingList() {
      const { status, obj } = await getOngoingList(this.form2)
      if (status === 0) {
        if (obj) {
          this.list2 = obj.list
          this.total2 = obj.totalNum
        } else {
          this.list2 = []
          this.total2 = 0
        }
      }
    },
    // 我的请假-历史
    async getHistoryList() {
      const { status, obj } = await getHistoryList(this.form1)
      if (status === 0) {
        if (obj) {
          obj.list.forEach((x) => {
            x.create_time = this.renderTime(x.create_time)
            x.review_time = this.renderTime(x.review_time)
          })
          this.list1 = obj.list
          this.total1 = obj.totalNum
        } else {
          this.list1 = []
          this.total1 = 0
        }
      }
    }
  }
}
</script>